<template>
  <div>
    <el-button link type="primary" :disabled="disabled" @click="handleClick">
      <div class="block-btn">{{ fileStr ? fileStr : '请上传参数文件' }}</div>
    </el-button>
    <el-dialog v-if="dialogShow" v-model="dialogShow" title="上传参数文件" width="500px" append-to-body :before-close="handleClose">
      <el-upload v-model:file-list="fileList" :auto-upload="false" :accept="accept" action="#" multiple :limit="limit" :on-exceed="handleExceed">
        <el-button link type="primary">
          <div class="block-btn">选择文件</div>
        </el-button>
        <template #tip>
          <div class="el-upload__tip">限制上传{{ limit }}个{{ accept }}类型文件</div>
        </template>
      </el-upload>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="handleSure">确定</el-button>
          <el-button @click="handleClose">取消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="VersionUpload" lang="ts">
// import { uploadPublicParameter } from '@/api/loadProcessingAlgorithm/loadVersionManagement/index';
import type { UploadProps } from 'element-plus';
const prop = defineProps({
  limit: {
    type: Number,
    default: 15
  },
  accept: {
    type: String,
    default: '.dat'
  },
  type: {
    type: String,
    default: 'public'
  },
  disabled: Boolean,
  modelValue: {
    type: String,
    default: ''
  }
});
const emit = defineEmits(['update:modelValue', 'on-change']);
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const fileList = ref([]);
const fileStr = ref('');
const dialogShow = ref(false);
const handleClick = () => {
  dialogShow.value = true;
};
const handleClose = () => {
  dialogShow.value = false;
};
const checkedFile = () => {
  let flag = true;
  for (let i = 0; i < fileList.value.length; i++) {
    const fileName = fileList.value[i].name;
    const fileType = fileName.substring(fileName.lastIndexOf('.'));
    if (!prop.accept.includes(fileType)) {
      flag = false;
      break;
    }
  }
  return flag;
};
const handleSure = async () => {
  // if (!checkedFile()) {
  //   proxy?.$modal.msgError('请选择正确的文件类型');
  //   return;
  // }
  if (!checkPublicFile()) {
    return;
  }
  fileStr.value = fileList.value.map((item) => item.name).join(',');
  emit('update:modelValue', fileStr.value);
  emit('on-change');
  dialogShow.value = false;
  // }
};
const checkPublicFile = () => {
  if (prop.type === 'public') {
    if (fileList.value.length !== prop.limit) {
      proxy?.$modal.msgError(`限制文件${prop.limit}个`);
      return false;
    }
  }
  for (let i = 0; i < fileList.value.length; i++) {
    const name = fileList.value[0].name;
    const type = name.substring(name.lastIndexOf('.')).toLocaleLowerCase();
    if (!prop.accept.includes(type)) {
      proxy?.$modal.msgError(`限制文件上传${prop.accept}类型文件`);
      return false;
    }
  }
  return true;
};
const handleExceed: UploadProps['onExceed'] = (files, uploadFiles) => {
  ElMessage.warning(`当前限制${prop.limit}, 你选择了这次选择了 ${files.length} 个文件, 共选择了${files.length + uploadFiles.length}文件`);
};
const getData = () => {
  return fileList.value;
};
watch(
  () => prop.modelValue,
  () => {
    if (prop.modelValue) {
      fileStr.value = prop.modelValue;
    }
  }
);
defineExpose({
  getData
});
onMounted(() => {
  if (prop.modelValue) {
    fileStr.value = prop.modelValue;
  }
});
</script>
<style lang="scss" scoped>
.block-btn {
  font-size: 12px;
  width: 820px;
  text-align: left;
  white-space: nowrap; /* 不换行 */
  overflow: hidden; /* 超出部分隐藏 */
  text-overflow: ellipsis; /* 使用省略号表示超出的文本 */
}
</style>
